import React, {useState} from 'react';

const Child = () => {
    //每次父组件更新，子组件也会更新， 因为 props 发生了改变    props是一个空对象， {} === {} 对比引用地址不同
    // memo采用
    console.log('child子组件渲染'); 
    return <>
        <h3>child子组件</h3>
    </>
}

const List = function() {
    const [num ,setNum] = useState(0);
    const handle = () => {
        setNum(num + 1);
    }
    const Fn = () => {}

    const flag = true;
    const isRun = true; // 状态变化， 组件更新， 会导致函数组件重新执行， 函数组件的执行结果就是返回的jsx元素， 函数组件的执行结果是一个虚
    return <>
        <h2>list组件</h2>
        <p>num: {num}</p>
        <button onClick={handle}>累加</button>
        <hr />
        <Child />
        {<Child />}

        <hr />
        1111
        {Symbol('aaa')}

        <ul>
            {
                ['vue', 'react', 'jquery', 'angular'].map(item => <li key={item}>@1123 {item}</li>)
            }
        </ul>

        <hr />
        {/* {new Number(19)} */}
        {
            <Fn />
        }


     

        <button style={{display: flag ? 'block' : 'none'}}>按钮</button>

        { flag && <button>按钮</button>  }

        {  flag  ? <button>按钮</button> : null  }

        <button>{isRun ? '进行中':'已完成'}</button>
    </>
}



export default List;

